<meta charset="utf-8"/>
<div class="row">
  <div class="col-xs-12">
    <div class="row">
      <div class="col-xs-12">
        <div class="clearfix">
          <table class="no-border" style="display:inline">
            <tr permission='sms_btn_listData' style="display:none">
              <td style="padding: 0px 6px;">
                模板编号
              </td>
              <td>
                <div class="input-group">
                  <input type="text" id="key_template_code" class="form-control search-query" placeholder="模板编号" style="width:140px"/>
                </div>
              </td>
              <td style="padding: 0px 6px;" class="hidden-480">
                发送时间
              </td>
              <td>
                <div class="input-group hidden-480">
                  <input id="key_date_start" type="text" class="form-control search-query" placeholder="起始时间" style="width:146px;" maxlength="19"/>
                  <span class="input-group-addon">
                    <i class="fa fa-exchange"></i>
                  </span>
                </div>
              </td>
              <td>
                <div class="input-group hidden-480">
                  <input id="key_date_end" type="text" class="form-control search-query" placeholder="截至时间" style="width:146px;" maxlength="19"/>
                </div>
              </td>
              <td>
                <div class="input-group">
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-inverse btn-white" id="btnSearch" permission='sms_btn_listData' style="display:none">
                      <span class="ace-icon fa fa-search bigger-110"></span>
                      搜索
                    </button>
                  </span>
                </div>
              </td>
            </tr>
          </table>
          <div class="hidden-480 pull-right tableTools-container" permission='sms_btn_listData' style="display:none"></div>
        </div>
        <table id="tableListSms" class="table table-striped table-bordered table-hover"></table>
      </div>
    </div>
  </div>
</div>
<div id="div_sms_info" style="display:none;padding-top:2px;margin-bottom:-20px;">
  <div class="input-group" style="margin-top:2px;margin-bottom:3px;">
    <input type="text" id="searchValue" class="form-control search-query" placeholder="输入手机号码"/>
    <span class="input-group-btn">
      <button type="button" class="btn btn-inverse btn-white" id="valueSearch">
        <span class="ace-icon fa fa-search bigger-110"></span>
        查询
      </button>
    </span>
  </div>
  <table id="listInfo" class="table table-striped table-bordered table-hover"></table>
</div>
<div id="divKeyColumns" style="display:none;padding:1px 0px;"></div>
<input type="hidden" id="sms_edit_keyId"/>
<div style="display:none;">
  <input type="hidden" id="sms_btn_listData"/>
  <input type="hidden" id="sms_row_info"/>
</div>
<script type="text/javascript">
  var scripts = [null, null];
  $('.page-content-area').ace_ajax('loadScripts', scripts, function(){
    var tableDom = '#tableListSms';
    $(function(){
      var urlRoute = '/sms/';/*请求controller层的url*/
      var getList = urlRoute + 'listData';/*获取数据列表*/
      var getListInfo = urlRoute + 'listInfo';/*预览详情*/
      var dialogTable = null;//用于搜索或刷新
      var thisTable = pageDataTable.initDataTable({
        tableDom : tableDom,
        sAjaxSource : getList,
        fnServerParams : function(params){
          params.push(
            {"name":"template_code","value":$("#key_template_code").val()},
            {"name":"date_start","value":$("#key_date_start").val()},
            {"name":"date_end","value":$("#key_date_end").val()}
          );
        },
        aoColumns : [
          {
            bSortable : false,
            mData : "kid",
            sWidth : "36px",
            sClass : "center",
            visible : true,
            sTitle : '<label title="序号" style="color:#000;font-size:13px;font-weight:normal">序号</label>'
          },
          {
            mData : "template_code",
            sTitle : "模板编号"
          },
          {
            mData : "template_name",
            sTitle : "模板名称"
          },
          {
            mData : "total",
            sTitle : "发送量"
          },
          {
            mData : "user_name",
            sTitle : "发布人"
          },
          {
            mData : "add_time",
            sTitle : "发送时间"
          },
          {
            mData : "_kid_",
            sTitle : "<label style='color:#000;margin-left:6px;' title='单行操作'>操作选项</label>",
            bSortable : false,
            visible : true,/*若不用到时设为false即可,请勿删除否则有bug*/
            sWidth: "76px"
          }
        ],
        columnDefs : [
          {
            targets : 0,//指定的列
            render : function(value,type,row,meta){
              return '<label >'+(meta.row < 9 ? '0'+(meta.row+1) : (meta.row+1))+'</label>';
            }
          },
          {
            targets : -1,
              render : function(value, type, row, meta){
              return "<a href='javascript:thisPage.rowInfo(" + meta.row + ");' style='outline:none;text-decoration: none;color:#3b8cff;margin-left:6px;display:none' permission='sms_row_info'>详情</a>";
            }
          },
          {
            targets : [1,2,3,4],
              render : function(value, type, row, meta){
              return pageDataTable.formatColumn(value);
            }
          },
          {
          visible : false,//列的隐藏显示
          targets : []//指定列
          }
        ]
      });
      pageDataTable.buttons(thisTable);
      pageDataTable.action(thisTable);
      pageDataTable.select(thisTable, tableDom);
      pageDataTable.tooltip();
      var thisJquery = $(tableDom).dataTable();
      thisPage = {
        init: function(){
          this.initDom();
          this.addEvent();
        },
        initDom: function(){
          laydate.render({
            elem: '#key_date_start',//指定元素
            format : 'yyyy-MM-dd HH:mm:ss',/*格式*/
            showBottom : true,/*是否显示底部栏*/
            type: 'datetime'/*格式,datetime|date|time*/
          });
          laydate.render({
            elem: '#key_date_end',//指定元素
            format : 'yyyy-MM-dd HH:mm:ss',
            type: 'datetime'
          });
        },
        createDropdown: function(){
        },
        addEvent: function(){
          this.btnEvent();
        },
        btnEvent: function(){
          $('#btnAdd').on('click', function(){
            thisPage.edit();
          });
          //搜索按钮
          $('#btnSearch').on('click', function(){
            thisPage.search();
          });
          $('#valueSearch').on('click', function(){
            var value = winFn.getDomValue("#searchValue");
            if(value != null){
              dialogTable.draw();
            }
          });          
          //按钮组-自定义显示列
          $('#iconColumn').parent().parent().on('click', function(){
            pageDataTable.columnCustom(thisTable, tableDom,'#divKeyColumns');
          });
          //按钮组-搜索
          $('#iconRefresh').parent().parent().on('click', function(){
            thisPage.search();
          });
        },
        search: function(){
          if(verifyFn.inputCheck('#sms_btn_listData','没有操作权限')) return;
          $(tableDom + '_wrapper table input[type=checkbox]').prop('checked', false);
          thisTable.draw();
        },
        resetForm: function(){
          $("#searchValue").val('');
        },
        rowInfo: function(index){
          var row = thisJquery.fnGetData(index);
          if(verifyFn.inputCheck('#sms_row_info','没有预览详情的权限')) return;
          thisPage.resetForm();//清空
          thisPage.initDialogTable(row.kid);
        },
        complete: function(data, index, search){
          try{
            if(index){
              layerFn.closeIndex(index);
            }
            if(search){
              thisPage.search();
            }
            if(data){
              layerFn.handleResult(data.msg, data.code);
            }
          }catch(e){}
        },
        initDialogTable : function(kid){
          dialogTable = pageDataTable.initDataTable({
            complete : function(settings,data){
              layerFn.winRDom('查看详情','#div_sms_info','780px',function(layerIndex,layero){},'关闭');
            },
            dom : "t<'row'<'col-sm-6'i><'col-sm-6'p>>",
            iDisplayLength : 25,
            tableDom : '#listInfo',
            sAjaxSource : getListInfo,
            fnServerParams : function(params){
              params.push(
                {"name":"kid","value":kid},
                {"name":"phone","value":$("#searchValue").val()}
              );
            },
            aoColumns : [
              {
                mData : "phone",
                bSortable : false,
                sTitle : "手机号码"
              },
              {
                mData : "add_time",
                bSortable : false,
                sTitle : "发送时间"
              }
            ],
            columnDefs : [
              {
                visible : false,//列的隐藏显示
                targets : []//指定列
              }
            ]
          });
        }
      };
      thisPage.init();
    });
  });
</script>